<template>
  <div class="Hleft flexC AlignItemsC flex1">
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB">
        <p class="gun_p font_s20 colorF">
          <span class="gun"></span>
          动态监管
        </p>
        <p class="font_s18 Medium subtitle textC" @click="clone.weigui = true">违规情况</p>
      </div>
      <ul class="ball_ul flex JustifyContentSA AlignItemsC">
        <li class="textC ball colorF" @click="clone.jianguan = true">
          <p class=" font_s32">672</p>
          <p class="font_s18" style="padding-top: 0.7rem;">监管总数</p>
        </li>
        <li class="textC ball colorF" @click="clone.changgui = true">
          <p class=" font_s32">607</p>
          <p class="font_s18" style="padding-top: 0.7rem;">常规检查</p>
        </li>
        <li class="textC ball colorF" @click="clone.zhuanxiang = true">
          <p class=" font_s32">35</p>
          <p class="font_s18" style="padding-top: 0.7rem;">专项检查</p>
        </li>
        <li class="textC ball colorF" @click="clone.feixing = true">
          <p class=" font_s32">30</p>
          <p class="font_s18" style="padding-top: 0.7rem;">飞行检查</p>
        </li>
      </ul>
    </div>
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB">
        <p class="gun_p font_s20 colorF">
          <span class="gun"></span>
          风险监管
        </p>
        <div class="flex JustifyContentSA">
          <!-- <p class="font_s14 Bold subtitle textC">风险标准</p> -->
          <p class="font_s18 Bold subtitle textC" @click="clone.fengxian = true">风险模型</p>
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul">
        <li class="textC">
          <div class="square">
            <p class="square_red font_s32 colorF LH3R">0</p>
            <p class="square_redp font_s18 colorF LH2_5R">高风险</p>
          </div>
        </li>

        <li class="textC" @click="switchmap(2)">
          <div class="square">
            <p class="square_huang font_s32 colorF LH3R">11</p>
            <p class="square_huangp font_s18 colorF LH2_5R">中风险</p>
          </div>
        </li>
        <li class="textC" @click="switchmap(1)">
          <div class="square">
            <p class="square_lv font_s32 colorF LH3R">28</p>
            <p class=" square_lvp  colorF LH2_5R">低风险</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="category flex1">
      <div class=" gun_t flex JustifyContentSB">
        <p class="gun_p font_s20 colorF">
          <span class="gun"></span>
          信用监管
        </p>
        <div class="flex JustifyContentSA">
          <p class=" font_s18 Medium subtitle textC" @click="clone.xinyong = true">信用模型</p>
          <!-- <p class="font_s18 Medium subtitle textC">风险模型</p> -->
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul">
        <li class="textC">
          <div class="square">
            <p class="square_red font_s32 colorF LH3R">0</p>
            <p class="square_redp font_s18 colorF LH2_5R">C &nbsp;差</p>
          </div>
        </li>

        <li class="textC">
          <div class="square">
            <p class="square_huang font_s32 colorF LH3R">4</p>
            <p class="square_huangp font_s18 colorF LH2_5R">B &nbsp;一般</p>
          </div>
        </li>

        <li class="textC">
          <div class="square">
            <p class="square_lv font_s32 colorF LH3R">17</p>
            <p class="square_lvp font_s18 colorF LH2_5R">A &nbsp;良好</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="category flex1 flexC">
      <div class=" gun_t flex JustifyContentSB">
        <p class="gun_p font_s20 colorF">
          <span class="gun"></span>
          分类监管
        </p>
        <div class="flex JustifyContentSA">
          <p class="font_s18 Medium subtitle textC" @click="clone.fenglei = true">分类模型</p>
          <!-- <p class="font_s18 Medium subtitle textC">风险模型</p> -->
        </div>
      </div>
      <ul class="flex JustifyContentSA AlignItemsC ball_ul">
        <li class="textC">
          <div class="square">
            <p class="square_red font_s32 colorF LH3R">0</p>
            <p class="square_redp font_s18 colorF LH2_5R">重点监管</p>
          </div>
        </li>
        <li class="textC">
          <div class="square">
            <p class="square_huang font_s32 colorF LH3R">15</p>
            <p class="square_huangp font_s18 colorF LH2_5R">关注监管</p>
          </div>
        </li>
        <li class="textC">
          <div class="flexC square  JustifyContentSB">
            <p class="font_s32 square_lv colorF LH3R">45</p>
            <p class="font_s18 square_lvp colorF LH2_5R">一般监管</p>
          </div>
        </li>
      </ul>
    </div>
    <Modal v-if="clone.weigui" @hidden="hiddenClone(0)" title="动态监管模型"><img src="@/assets/img/home/211.png" class="bj" /></Modal>
    <Modal v-if="clone.fengxian" @hidden="hiddenClone(1)"><img src="@/assets/img/home/17.png" alt class="bj" /></Modal>
    <Modal v-if="clone.xinyong" @hidden="hiddenClone(2)"><img src="@/assets/img/home/18.png" alt class="bj" /></Modal>
    <Modal v-if="clone.fenglei" @hidden="hiddenClone(3)"><img src="@/assets/img/home/20.png" alt class="bj" /></Modal>
    <YiBaoPolygon v-if="clone.jianguan" @hidden="hiddenClone(4)"><TotalSupervision></TotalSupervision></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.changgui" @hidden="hiddenClone(5)"><Changgui></Changgui></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.zhuanxiang" @hidden="hiddenClone(6)"><Zhuanxiang></Zhuanxiang></YiBaoPolygon>
    <YiBaoPolygon v-if="clone.feixing" @hidden="hiddenClone(7)"><Feixing></Feixing></YiBaoPolygon>
  </div>
</template>

<script>
import { mapFun } from '@/components/gdmap'
import { lowRisk, middRisk } from '@/listData.js'
import Modal from '@/components/Modal'
import YiBaoPolygon from '@/components/YiBaoPolygon'

import Changgui from './leftComponents/Changgui'
import Zhuanxiang from './leftComponents/Zhuanxiang'
import Feixing from './leftComponents/Feixing'
import TotalSupervision from './leftComponents/TotalSupervision'
export default {
  name: 'Hleft',
  components: {
    Modal,
    YiBaoPolygon,
    Changgui,
    Zhuanxiang,
    Feixing,
    TotalSupervision
  },
  data () {
    return {
      tempState: '1',
      isActive: 0,
      clone: {
        weigui: false,
        fengxian: false,
        xinyong: false,
        fenglei: false,
        jianguan: false,
        changgui: false,
        zhuanxiang: false,
        feixing: false
      }
    }
  },
  methods: {
    gdmap () {
      let map = new AMap.Map('container', {
        resizeEnable: true,
        mapStyle: 'amap://styles/darkblue',
        zoom: 12,
        // pitch: 40,
        // rotation: 45,
        // viewMode: '3D',
        center: [121.552556, 31.215723]
      })
      this.$root.MapGd = map
    },
    // 低风险 & 中风险
    switchmap (index) {
      console.log(index)
      if (index === 1) {
        mapFun(this.$root.MapGd, lowRisk)
      } else if (index === 2) {
        mapFun(this.$root.MapGd, middRisk)
      }
    },
    hiddenClone (index) {
      this.isActive = index
      if (index === 0) {
        this.clone.weigui = false
      } else if (index === 1) {
        this.clone.fengxian = false
      } else if (index === 2) {
        this.clone.xinyong = false
      } else if (index === 3) {
        this.clone.fenglei = false
      } else if (index === 4) {
        this.clone.jianguan = false
      } else if (index === 5) {
        this.clone.changgui = false
      } else if (index === 6) {
        this.clone.zhuanxiang = false
      } else if (index === 7) {
        this.clone.feixing = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Hleft {
  .bj {
    width: 95%;
    height: 90%;
    position: absolute;
    top: 4%;
    left: 3%;
  }

  .category {
    margin-top: 1.0625rem;
    .subtitle {
      width: 7.75rem;
      height: 1.875rem;
      background: url(../../assets/img/home/008.png) no-repeat;
      background-size: 100% 100%;
      color: #0a1943;
      font-weight: bold;
      line-height: 2rem;
    }
    .gun {
      width: 0.25rem;
      height: 1.25rem;
      margin: 0.35rem 0.8rem 0rem 0.8rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
    }
    .gun_t {
      width: 32.375rem;
      height: 2rem;
      line-height: 2.5rem;
      background: linear-gradient(90deg, rgba(45, 125, 241, 0.6) 0%, rgba(45, 125, 241, 0.25) 100%);
    }
    .gun_p {
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 2rem;
      text-shadow: 0.4375rem 0.4375rem 0.25rem rgba(0, 0, 0, 1);
    }
    .ball_ul {
      width: 32.375rem;
      height: 7.1875rem;
      background: url(../../assets/img/home/007.png) no-repeat;
      background-size: 100% 100%;
    }

    .ball {
      width: 6.5rem;
      height: 5.625rem;
      background: url(../../assets/img/home/009.png) no-repeat;
      background-size: 100% 100%;
    }
    .ball:hover {
      color: rgba(255, 255, 255, 1);
      background: url(../../assets/img/home/100.png) no-repeat;
      background-size: 100% 100%;
    }

    .square {
      width: 8.625rem;
      height: 5.125rem;
      background: rgba(4, 13, 39, 1);
      border-radius: 0.25rem;
      .square_lv {
        color: #48c215;
        border-top: 0.125rem #48c215 solid;
        border-radius: 0.325rem;
      }
      .square_lvp {
        border: 0.125rem #48c215 solid;
        border-top: 0rem;
        border-bottom-left-radius: 0.325rem;
        border-bottom-right-radius: 0.325rem;
        line-height: 2.125rem;
      }
      .square_huang {
        color: #e3c403;
        border-top: 0.125rem #e3c403 solid;
        border-radius: 0.325rem;
      }
      .square_huangp {
        border: 0.125rem #e3c403 solid;
        border-top: 0rem;
        border-bottom-left-radius: 0.325rem;
        border-bottom-right-radius: 0.325rem;
        line-height: 2.125rem;
      }
      .square_red {
        color: #de1313;
        border-top: 0.125rem #de1313 solid;
        border-radius: 0.325rem;
      }
      .square_redp {
        border: 0.125rem #de1313 solid;
        border-top: 0rem;
        border-bottom-left-radius: 0.325rem;
        border-bottom-right-radius: 0.325rem;
        line-height: 2.125rem;
      }
    }
  }
}
</style>
